<template>
  <view class="auth-box">
    <u-form ref="form" :model="formData" :rules="rules">
      <!-- 账号 -->
      <u-form-item ref="item-mobile" prop="mobile" border-bottom>
        <u-input v-model="formData.mobile" type="number" maxlength="11" clearable placeholder="请输入手机号/账号" placeholder-style="font-size: 14px;color: #888888" border="none" custom-style="height: 60rpx;padding-left: 40rpx;" />
      </u-form-item>
      <!-- 密码 -->
      <u-form-item ref="item-password" prop="password" border-bottom>
        <u-input v-model="formData.password" :type="inputType" maxlength="16" placeholder="请输入密码" placeholder-style="font-size: 14px;color: #888888" border="none" custom-style="height: 60rpx;padding-left: 40rpx;">
          <template slot="suffix">
            <view class="passwd-gap-box">
              <view v-if="inputType === 'password'" class="eye iconfont .icon-eye" @click="inputType = 'text'" />
              <view v-if="inputType === 'text'" class="eye iconfont .icon-eyes_line_b" @click="inputType = 'password'" />
              <view class="gap">|</view>
              <view class="forget-passwd" @click="$emit('forgetPassword')">忘记密码</view>
            </view>
          </template>
        </u-input>
      </u-form-item>

      <u-gap height="25" />
      <view class="btn-group">
        <u-button class="authBtn" type="success" custom-style="border: none;" @click="handleSubmit">登陆</u-button>
      </view>

      <view class="tip-box" @tap="read">
        <checkbox :checked="readFlag" /> 若手机号未注册将进入注册流程，注册即视为同意<text>《服务条款》</text>和<text>《隐私策略》</text>
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputType: 'password',
      formData: {
        mobile: '',
        password: '',
        code: ''
      },
      rules: {
        mobile: [
          {
            type: 'integer',
            required: true,
            message: '请填写手机号',
            trigger: ['blur', 'change']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        password: {
          type: 'string',
          min: 4,
          max: 16,
          required: true,
          message: '密码长度4-16位密码',
          trigger: ['blur', 'change']
        },
        code: {
          type: 'integer',
          len: 6,
          required: true,
          message: '请填写6位验证码',
          trigger: ['blur', 'change']
        }
      }
    }
  },
  onLoad() { },
  onReady() {
    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate().then(res => {
        uni.login({
          provider: 'weixin',
          success: res => {
            const data = this.formData
            data.socialType = 34 // WECHAT_MINI_APP 先指定固定值
            data.socialCode = res.code
            data.socialState = Math.random() // 该参数没有实际意义暂时传随机数
            this.mobileLogin(data)
          },
          fail: res => {
            this.mobileLogin(this.formData)
          }
        })
      })
    },
    mobileLogin(data) {
      this.$store.dispatch('Login', { type: this.currentModeIndex, data: data }).then(res => {
        uni.$u.toast('登录成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 300)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 30rpx);
  @include flex-space-between(column);
}

.auth-header {
  width: 90%;
  .auth-logo {
    @include flex-center(column);
    padding: 60rpx 0;
  }

  .auth-box {
    @include flex-center(column);
    //密码后槽box
    .passwd-gap-box {
      @include flex-center;
      color: #999999;
      font-size: 14px;
      line-height: 60rpx;
      //密码后槽图标
      .eye {
        padding-right: 20rpx;
      }
      .forget-passwd {
        padding-left: 20rpx;
      }
    }
    .btn-group {
      //登陆按钮样式
      .authBtn {
        font-size: 32rpx;
      }
    }
    .tip-box {
      font-size: 24rpx;
      color: #888888;
      checkbox {
        transform: scale(0.7);
      }
      text {
        font-size: 24rpx;
        color: #ff0101;
      }
    }
  }
}

.auth-footer {
  color: #888888;
  width: 60%;
  .menu {
    .iconfont {
      font-size: 72rpx;
      color: var(--color);
    }
    .grid-text {
      padding-top: 20rpx;
    }
  }
}
</style>
